import QtQuick 1.0
import "common" as Common
import "mobile" as Mobile

Item {
    id: screen;
    width: 320;
    height: 480;

    property bool inListView : false

    Rectangle {
        id: background
        color: "#343434"
        //anchors.fill: parent;
        width: parent.width;
        height: parent.height;


        // The model:
        Common.AccountModel { id: accountModel }

        // The view:
        Item {
            id: views
            width: parent.width
            anchors.top: titleBar.bottom; anchors.bottom: toolBar.top

            ListView {
                id: listView
                anchors.fill: parent;anchors.margins: 20
                model: accountModel
                delegate: Common.ListDelegate {}

                section.property: "account"
                section.criteria: ViewSection.FullString
                section.delegate: Common.SectionDelegate {}
            }

            Mobile.AccountDetails { id: accountDetails; width: parent.width; anchors.left: views.right; height: parent.height }

        }

        Mobile.TitleBar { id: titleBar; width: parent.width; height: 40; opacity: 0.9 }

        Mobile.ToolBar {
            id: toolBar
            height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9
            button1Label: "Refresh"; button2Label: "Add"
            onButton1Clicked: {
                console.log(11);
                accountModel.reload()
            }
            onButton2Clicked: {
                console.log(22);
                if (screen.inListView == true) screen.inListView = false; else screen.inListView = true
            }
        }

        /*
        Item { id: foreground; anchors.fill: parent }
        */

        Connections {
            target: accountDetails
            onClosed: {
                console.log(background.state);
                if (background.state == "DetailsView") {
                    background.state = '';
                    //imageDetails.photoUrl = "";
                }
            }
        }

        states: State {
            name: "DetailsView"
            PropertyChanges { target: views; x: -parent.width }

            PropertyChanges {
                target: toolBar
                onButton1Clicked: if (background.state=='DetailedView') background.state=''; else accountDetails.state='DetailedView'
            }
            PropertyChanges { target: toolBar; button2Label: "Back" }
            PropertyChanges { target: toolBar; onButton2Clicked: accountDetails.closed() }
            /*
            PropertyChanges { target: toolBar; button1Label: "View..." }
            */
        }
        transitions: Transition {
            NumberAnimation { properties: "x"; duration: 500; easing.type: Easing.InOutQuad }
        }
    }
}
